<template>
  <div class="topicCircle">
    <h3>话题圈</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入ID" v-model="search1">
          <template slot="prepend">ID</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入标题" v-model="search2">
          <template slot="prepend">标题</template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="用户ID"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="图片" width="90">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt />
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="标题" width="150"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="简介"></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //添加弹窗 -->
    <el-dialog title="添加" :visible.sync="addDialogVisible" width="40%" center>
      <div class="row">
        <span>标题：</span>
        <el-input placeholder="请输入标题" v-model="inputTitle" clearable></el-input>
      </div>
      <div class="row">
        <span>简介：</span>
        <textarea v-model="inputIntroduction"></textarea>
      </div>
      <div class="row">
        <span>上传图片：</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitAdd">提交</el-button>
        <el-button type="info" size="small" @click="cancelAdd">取消</el-button>
      </div>
    </el-dialog>
    <!-- //编辑弹窗 -->
    <el-dialog title="话题修改" :visible.sync="modifyDialogVisible" width="40%" center>
        <div class="row">
        <span>ID：</span>
        <el-input v-model="inputID" :disabled="true"></el-input>
      </div>
      <div class="row">
        <span>标题：</span>
        <el-input placeholder="请输入标题" v-model="inputTitle" clearable></el-input>
      </div>
      <div class="row">
        <span>简介：</span>
        <textarea v-model="inputIntroduction"></textarea>
      </div>
      <div class="row">
        <span>图片：</span>
        <img :src="imgUrl" alt="">
      </div>
      <div class="row">
        <span>上传图片：</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitAdd">提交</el-button>
        <el-button type="info" size="small" @click="cancelAdd">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "topicCircle",
  data() {
    return {
      search1: "",
      search2: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      //多选框选中的值
      multipleSelection: [],
      currentPage1: 1,
      //添加弹窗
      addDialogVisible: false,
      //编辑弹窗
      modifyDialogVisible:false,
      //添加修改图片上传成功显示路径
      dialogImageUrl: "",
      //添加修改标题
      inputTitle: "",
      //添加修改简介
      inputIntroduction: "",
      //编辑时候旧图片地址
      imgUrl:"",
      //编辑的时候用户id
      inputID:"",
      //预览图片
      dialogVisible:false,
    };
  },
  mounted() {},
  methods: {
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //显示编辑弹窗
    handleEdit(index, row) {
        this.modifyDialogVisible=true;

    },
    //删除单行
    handleDelete(index, row) {},
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //添加
    addData() {
      this.addDialogVisible = true;
    },
    //批量删除
    batchDelete() {},
    //添加弹窗图片上传成功回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //提交添加内容
    submitAdd() {},
    //取消添加
    cancelAdd() {
      this.addDialogVisible = false;
    },
    //删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
textarea {
  width: 2.5rem;
  height: 1rem;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 0.05rem;
}
.row >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.row >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.row >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.row >>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>